<template>
  <div class="tab-bar">    
       <router-link class="botom-item" :to="{name:item.name}" v-for="(item,index) in botomdata" :key="index" tag="li" active-class="active">
          <img :src="item.img" alt="">
          <img class="active-img" :src="item.img1" alt="">
          <p class="imgp">{{item.data}}</p>
       </router-link>
  </div>
</template>
<script>
export default {
   data(){
     return{
        botomdata:[
          {
            img:require("../assets/img/coming.png"),
            img1:require("../assets/img/coming-active.png"),
            data:'阅读',
            name:'Home'
          },
          {
            img:require("../assets/img/coming.png"),
            img1:require("../assets/img/coming-active.png"),
            data:'电影',
            name:'Minea'
          },
        ]
     }
   },
   methods:{
   }
}
</script>
<style scoped lang="scss">
.tab-bar{
    height: 0.49rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 0.18rem;
    position: relative;
    position: fixed;
    left: 0;
    bottom:0;
    z-index: 999;
   background: #ffffff;
    &::after{
      content: '';
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height: 0.01rem;
      background: #e1e1e1;
      transform: scale(1,0.5)
    }
    .botom-item{
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
       font-size: 0.1rem;
      img{
         width: 0.2rem;
         height: 0.2rem;
      }
      .imgp{
        font-size: 0.1rem;
        color:#666;
        height: 0.16rem;
        width:0.48rem;
        text-align: center; 
        line-height: 0.18rem;
      }
    }

      .active-img{
        display: none;
      }
    .active{
      img{
        display: none;
      }
      .active-img{
        display: inline-block;
      }
      .imgp{
        color:#405f80;
      }
    }
}

</style>
